<template>
  <div class="message-item">
    <!-- 留言内容 -->
    <div class="message-content">
      <!-- 使用 props 传递的留言内容 -->
      {{ msg }}
    </div>

    <!-- 删除按钮，触发父组件的删除事件 -->
    <button @click="handleDelete">删除留言</button>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits,ref } from 'vue';

// 使用 defineProps 定义 props
const props = defineProps<{
  message: any;
}>();
const msg=ref(props.message)

// 定义事件
const emit = defineEmits(['delete-message']);

// 处理删除事件的方法
function handleDelete() {
  emit('delete-message');
}

// 使用 defineExpose 暴露内部方法或数据
// defineExpose({
//   handleDelete,
// });
</script>

<style scoped>
/* 子组件 MessageItem 样式 */
.message-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.message-content {
  margin-bottom: 5px;
}

.message-item button {
  background-color: #dc3545;
  color: white;
  padding: 5px 10px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.message-item button:hover {
  background-color: #c82333;
}
</style>